<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions"
      xmlns:ui="http://java.sun.com/jsf/facelets"
        >

<ui:composition template="/template.xhtml">
    <ui:define name="body">
        <h:form id="main">

            <p:hotkey bind="r" handler="clickButton('main:btnReset')"/>
            <p:growl id="growl" life="4000" showDetail="true" autoUpdate="true"/>
            <p:panel header="#{text['balance.title']}" style="width: 700px;" toggleable="true">

                <p:panelGrid columns="4" cellpadding="2" id="panelSearch">


                    <f:facet name="footer" style="text-align: right">
                        <p:commandButton id="btnSearch" value="#{text['common.search']}"
                                         action="#{balanceMgb.search}" ajax="true" icon="ui-icon-search"
                                         update="panelResult"/>

                        <p:commandButton value="#{text['common.reset']}" update="panelSearch, panelResult"
                                         icon="ui-icon-arrowreturnthick-1-w" immediate="true"
                                         action="#{balanceMgb.reset}" process="@this" id="btnReset"/>


                    </f:facet>

                    <p:outputLabel value="#{text['balance.productCode']}"/>
                    <p:inputText value="#{balanceMgb.searchProductCode}" label="id" id="searchProductCode"/>
                    <p:outputLabel value="#{text['balance.productName']}"/>
                    <p:inputText value="#{balanceMgb.searchProductName}" label="name" id="searchProductName"/>


                </p:panelGrid>

                <p:blockUI block="panelSearch" trigger="btnSearch"/>
            </p:panel>

            <p:panel id="panelResult">

                <p:dataTable var="row" value="#{balanceMgb.resultSearch}"
                             selectionMode="single" rowKey="#{row.productId}" style="width: 700"
                             selection="#{balanceMgb.selected}" id="dataResult"
                             paginator="true" rows="#{constDataTable.pageRows}"
                             paginatorTemplate="#{constDataTable.paginatorTemplate}"
                             rowsPerPageTemplate="#{constDataTable.rowsPerPageTemplate}"
                             scrollable="true" scrollHeight="#{constDataTable.scrollHeight}"
                             binding="#{balanceMgb.dtResult}"
                             paginatorPosition="bottom"
                        >


                    <p:column sortBy="#{row.product.code}">
                        <f:facet name="header">
                            <h:outputText value="#{text['balance.productCode']}"/>
                        </f:facet>
                        <h:outputText value="#{row.product.code}"/>
                    </p:column>
                    <p:column sortBy="#{row.product.name}">
                        <f:facet name="header">
                            <h:outputText value="#{text['balance.productName']}"/>
                        </f:facet>
                        <h:outputText value="#{row.product.name}"/>
                    </p:column>

                    <p:column sortBy="#{row.qty}">
                        <f:facet name="header">
                            <h:outputText value="#{text['balance.qty']}"/>
                        </f:facet>
                        <h:outputText value="#{row.qty}"/>

                    </p:column>
                    <f:facet name="footer">
                        <h:outputText
                                value="#{text['common.total']}: #{fn:length(balanceMgb.resultSearch)}" id="rowCount"/>

                    </f:facet>
                </p:dataTable>

            </p:panel>
            <h:commandLink id="pdf">
                <p:outputLabel value="Export"></p:outputLabel>
                <p:dataExporter type="csv" target="dataResult" fileName="ProductCategories"/>
            </h:commandLink>
        </h:form>

    </ui:define>

</ui:composition>
</html>